<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!-- 引入jquery代码, -->
<html>
<head>
    <title>编辑古画</title>
</head>
<body>
<%@include file="header.jsp" %>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
        </div>
        <div class="col-md-6">
            <form class="form-horizontal" role="form" method="post" action="updateAncientPainting.action?id=${ancientPainting.id}" enctype="multipart/form-data">
                <div class="form-group">
                    <label class="col-sm-4 control-label" for="name">古画名</label>
                    <div class="col-sm-6">
                        <input class="form-control" id="name" name="name" type="text" value="${ancientPainting.name}" maxlength="20" required/>
                    </div>
                    <div class="text-danger" id="checkInfo"></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label" for="catalogName">分类</label>
                    <div class="col-sm-6">
                        <select id="catalogName" name="catalogName" class="form-control form-control-placeholder">
                            <option value="" disabled selected hidden>请选择</option>
                            <c:if test="${!empty catalogs}">
                                <c:forEach items="${catalogs}" var="catalog" varStatus="vs">
                                    <option value="${catalog.name}" style="color: black">${catalog.name}</option>
                                </c:forEach>
                            </c:if>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label" for="author">画家</label>
                    <div class="col-sm-6">
                        <input class="form-control" id="author" name="author" type="text" value="${ancientPainting.author}" maxlength="10" required/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label" for="press">出版社</label>
                    <div class="col-sm-6">
                        <input class="form-control" id="press" name="press" type="text" value="${ancientPainting.press}" maxlength="20" required/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label" for="price">价格</label>
                    <div class="col-sm-6">
                        <input class="form-control" id="price" name="price" type="number" value="${ancientPainting.price}" max="9999999999" required/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label" for="image">上传作品</label>
                    <div class="col-sm-6">
                        <input class="form-control" type="file" id="image" name="image" max="1" onchange="imageChange()" style="display: none" accept="image/*">
                        <img id="path" src="${ancientPainting.path}" width='80' height='80' onclick="imageUploadClick()" style="cursor: pointer" />
                        <%-- <input class="form-control" id="path" name="path" type="text" />--%>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-4"></div>
                    <div class="col-sm-6">
                        <input type="submit" class="btn btn-primary" id="addButton"/>
                        <input type="reset" class="btn btn-primary"/>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-3">
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    $(document).ready(function () {
        // 页面刚进入，获取最新的目录值，设置到下拉框中
        $("#catalogName").val('${ancientPainting.catalogName}' == '-' ? '' : '${ancientPainting.catalogName}');
        $("#catalogName").on('change', function () {
            if ($(this).val() != -1) {
                //这里是默认的
                $('#catalogName').addClass('black_color').removeClass('gray_color');
            }
        });
    });

    // 图片点击触发图片上传
    function imageUploadClick() {
        $("#image").click();
    }

    function imageChange() {
        var filePath = $("#image").val();
        var files = document.getElementById("image").files;
        if (files?.length) {
            let fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(); //获取文件后缀
            let src = window.URL.createObjectURL(files[0]); //转成可以在本地预览的格式

            // 检查是否是图片
            if (!fileFormat.match(/.png|.jpg|.jpeg|.bmp|.gif/)) {
                //error_prompt_alert
                alert('上传错误,文件格式必须为：png/jpg/jpeg/bmp/gif');
                return;
            }
            if (src !== "") {
                const path = document.getElementById("path");
                if (path !== null) {
                    path.src = src;
                }
            }
        }
    }
</script>
</html>